<template>
  <div>
    <a-layout>
      <a-layout-header class="header">
        <div class="logo" />
        <!-- <a-menu
          v-model:selectedKeys="selectedKeys1"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1">nav 1</a-menu-item>
          <a-menu-item key="2">nav 2</a-menu-item>
          <a-menu-item key="3">nav 3</a-menu-item>
        </a-menu> -->
        <a-space>
          <img src="" alt="" />
        </a-space>
      </a-layout-header>

      <a-layout>
        <a-layout-sider width="200" style="background: aqua">
          <a-menu
            v-model:selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"
            mode="inline"
            :style="{ height: '100%', borderRight: 0 }"
          >
            <a-sub-menu key="sub1">
              <template #title>
                <span>
                  <user-outlined />
                  哪些天堂
                </span>
              </template>
              <a-menu-item key="1">哪些无穷无尽</a-menu-item>
              <a-menu-item key="2">层层套叠的天空</a-menu-item>
              <a-menu-item key="3">他们在哪里</a-menu-item>
              <a-menu-item key="4">被轨迹陷害到</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <template #title>
                <span>
                  <laptop-outlined />
                  这般模样
                </span>
              </template>
              <a-menu-item key="5">而如今</a-menu-item>
              <a-menu-item key="6">我们是暗裔</a-menu-item>
              <a-menu-item key="7">我曾触摸过星辰</a-menu-item>
              <a-menu-item key="8">曾见证过数千个</a-menu-item>
            </a-sub-menu>
            <!-- <a-sub-menu key="sub3"> -->
            <!-- <template #title>
                <span>
                  <notification-outlined />
                  subnav 3
                </span>
              </template> -->
            <a-menu-item key="9">太阳的光芒</a-menu-item>
            <a-menu-item key="10">而如今我被这</a-menu-item>
            <a-menu-item key="11">优雅蒙蔽了双眼</a-menu-item>
            <a-menu-item key="12">所以我的目标</a-menu-item>
            <a-menu-item key="13">怎可能不黑暗</a-menu-item>
            <!-- </a-sub-menu> -->
          </a-menu>
        </a-layout-sider>
        <a-layout-content>
          <a-space>
            <a-select
              ref="select"
              v-model:value="value1"
              style="width: 120px"
              @focus="focus"
              @change="handleChange"
            >
              <a-select-option value="jack">Jack</a-select-option>
              <a-select-option value="lucy">Lucy</a-select-option>
              <a-select-option value="disabled" disabled
                >Disabled</a-select-option
              >
              <a-select-option value="Yiminghe">yiminghe</a-select-option>
            </a-select>
            <a-select v-model:value="value2" style="width: 120px" disabled>
              <a-select-option value="lucy">Lucy</a-select-option>
            </a-select>
            <a-select v-model:value="value3" style="width: 120px" loading>
              <a-select-option value="lucy">Lucy</a-select-option>
            </a-select>
          </a-space>
          <!-- <h2 style="margin-top: 10px">use options (recommend)</h2> -->
          <a-space>
            <a-select
              ref="select"
              v-model:value="value1"
              style="width: 120px"
              :options="options1"
              @focus="focus"
              @change="handleChange"
            ></a-select>
            <a-select
              v-model:value="value2"
              style="width: 120px"
              disabled
              :options="options2"
            ></a-select>
            <a-select
              v-model:value="value3"
              style="width: 120px"
              loading
              :options="options3"
            ></a-select>
          </a-space>

          <a-space :style="{ marginTop: '20px' }">
            <a-button type="primary" @click="getHappy">Primary Button</a-button>
            <a-button @click="changeHappy('I am better')"
              >Default Button</a-button
            >
            <a-button type="dashed">Dashed Button</a-button>
            <a-button type="text">Text Button</a-button>
            <a-button type="link">Link Button</a-button>
          </a-space>
          <br />
          <a-space>
            151515
            <!-- <a-bove></a-bove> -->
            <About @changeBetter="changeBetter" />
          </a-space>
          <br />
          <a-space>
            {{ happy }}
          </a-space>
        </a-layout-content>
      </a-layout>

      <!-- <a-layout-footer>Footer</a-layout-footer> -->
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import type { SelectProps } from "ant-design-vue";
import {
  computed,
  defineComponent,
  reactive,
  ref,
  defineExpose,
  onMounted,
} from "vue";

import { useHomeStore } from "@/store/modules/home";
import About from "@/pages/AboutView.vue";

onMounted(() => {
  console.log(useHomeStore());
});
const homeStore: any = useHomeStore();

const options1 = ref<SelectProps["options"]>([
  {
    value: "jack",
    label: "Jack",
  },
  {
    value: "lucy",
    label: "Lucy",
  },
  {
    value: "disabled",
    label: "Disabled",
    disabled: true,
  },
  {
    value: "yiminghe",
    label: "Yiminghe",
  },
]);
const options2 = ref<SelectProps["options"]>([
  {
    value: "lucy",
    label: "Lucy",
  },
]);
const options3 = ref<SelectProps["options"]>([
  {
    value: "lucy",
    label: "Lucy",
  },
]);
const focus = () => {
  console.log("focus");
  console.log(homeStore.changeHappyValue);
};

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

// function changeFamily(){}

const happy = computed(() => homeStore.happy);
const getHappy = () => {
  console.log(happy);
  console.log(happy.value);
  // homeStore.changeHappyValue()
};

const changeHappy = (val: string) => {
  console.log(val);

  homeStore.changeHappy(val);
};

const changeBetter = (val: any) => {
  homeStore.changeHappy(val);
};
// defineExpose({ changeHappy });

const value1 = ref("lucy");
const value2 = ref("lucy");
const value3 = ref("lucy");

const selectedKeys1 = ref(["3"]);
const selectedKeys2 = ref(["1"]);
const collapsed = ref(false);
const openKeys = ref(["sub1"]);
</script>

<style lang="less">
// .ant-layout .ant-layout-header {
//   background-color: #bfc;
// }
// .ant-layout-sider-children {
//   background-color: aquamarine;
// }

.ant-layout-content {
  //   flex: none;
  justify-content: center;
  height: calc(100vh - 70px);
  padding: 12px;
}
.header {
  height: 70px;
}

// .ant-layout .ant-layout-sider{
//     height: 100%;
//     background-color: aqua;
// }
</style>
